import useLocale from '@/utils/useLocale';
import { Button, Modal, Space } from '@arco-design/web-react';
import React, { useContext } from 'react';
import locale from './locale';
import styles from './style//index.module.less';
import cs from 'classnames';
import { ReqViolationCreate } from '@/api/interface/violation';
import { EnumsRes } from '@/api/interface';
import { GlobalContext } from '@/context';
import PdfLogo from '@/assets/pdf_logo.png';
import PdfLogoUEA from '@/assets/pdf_logo_UAE.png';
import { useSelector } from 'react-redux';
import { GlobalState } from '@/store';
function Preview({
  visible,
  onVisible,
  formData,
  enums,
  entitys,
}: {
  visible: boolean;
  onVisible: (e: boolean) => void;
  formData: ReqViolationCreate;
  enums: { [key: string]: EnumsRes[] };
  entitys: any;
}) {
  const t = useLocale(locale);
  const { rtl, lang } = useContext(GlobalContext);
  const onCancel = () => {
    onVisible(false);
  };

  const { userInfo } = useSelector((state: GlobalState) => state);

  const print = () => {
    const printContent = document.getElementsByClassName('print')[0].innerHTML;
    const iframeDom = document.createElement('iframe');
    const attrObj = {
      height: 0,
      width: 0,
      border: 0,
      id: 'iframe',
    };
    const styleObj = {
      position: 'fixed',
      zIndex: '-999',
    };

    Object.entries(attrObj).forEach(([key, value]) =>
      iframeDom.setAttribute(key, String(value))
    );
    Object.entries(styleObj).forEach(([key, value]) => {
      iframeDom.style[key] = value;
    });

    document.body.appendChild(iframeDom);

    if (iframeDom.contentWindow) {
      const iframeDoc = iframeDom.contentWindow.document;
      iframeDoc.write(printContent);

      window.setTimeout(function () {
        iframeDom.contentWindow.print();
        document.body.removeChild(iframeDom);
      }, 1000);
    } else {
      console.error('contentWindow is null');
    }
  };
  const footer = (
    <Space size={20}>
      <Button
        className={styles['button']}
        type="primary"
        size="large"
        onClick={print}
      >
        {t['preview.print']}
      </Button>
    </Space>
  );

  return (
    <>
      <Modal
        style={{ width: '804px' }}
        visible={visible}
        onCancel={() => onCancel()}
        maskClosable={true}
        unmountOnExit={true}
        footer={footer}
        className={cs(styles['preview'])}
      >
        <div className={styles['preview-content']}>
          <div className={cs('print')}>
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                padding: '10px 0',
              }}
            >
              <img
                src={userInfo.orgName == 'ADAA' ? PdfLogo : PdfLogoUEA}
                style={{ width: '50%' }}
              />
            </div>
            <div style={{ fontSize: '16px', lineHeight: '1.5' }}>
              Supreme Audit Institution ({userInfo.orgName}) is responsible for
              receiving, examining, and conducting investigations into financial
              and administrative violations in all entities where Abu Dhabi
              Government owns or contributes by more than 25% of its capital.
            </div>
            <div style={{ fontSize: '24px', padding: '10px 0' }}>
              What is our Responsibility
            </div>
            <div style={{ fontSize: '18px', padding: '6px 0' }}>
              To investigate:
            </div>
            <ul>
              <li style={{ listStyle: 'decimal' }}>Abuse of power.</li>
              <li style={{ listStyle: 'decimal' }}>Conflict of interest.</li>
              <li style={{ listStyle: 'decimal' }}>Wastage of public funds.</li>
              <li style={{ listStyle: 'decimal' }}>
                Misappropriation of funds or property of subject entities.
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Manipulation of the subject entity procurement process.
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Negligence or dereliction that results in financial loss to the
                Emirate.
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Manipulation of financial statements.
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Actions that affect the Emirate&apos;s financial goodwill.
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Leakage of official secrets of a subject entity or the Emirate.
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Any other financial or administrative corruption violation
              </li>
            </ul>
            <div style={{ fontSize: '24px', padding: '10px 0' }}>
              What is not within our Scope
            </div>
            <div style={{ fontSize: '18px', padding: '6px 0' }}>
              To investigate:
            </div>
            <ul>
              <li style={{ listStyle: 'decimal' }}>
                Customer service complaints.
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Supplier and contractor disputes.
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Civil disputes between private individuals and companies.
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Administrative and HR related grievances of employees (e.g.
                promotion, termination).
              </li>
              <li style={{ listStyle: 'decimal' }}>
                Government services performance complaints.
              </li>
            </ul>
            <div style={{ fontSize: '24px', padding: '10px 0' }}>
              How we protect You
            </div>
            <div style={{ fontSize: '16px', lineHeight: '1.5' }}>
              Through ADAA&apos;s whistleblower and witness protection program,
              we will provide the necessary protection to you. We ensure you
              that any disclosure you make to ADAA under this law is not
              considered a violation of any other law or company policies.
            </div>
            <div style={{ fontSize: '24px', padding: '10px 0' }}>
              What is your Responsibility
            </div>
            <div style={{ fontSize: '16px', lineHeight: '1.5' }}>
              Information provided by you to UAEAA should be true, and complete
              to the best of your knowledge , and knowingly providing false or
              misleading information is illegal and may lead to penalties
            </div>
            <div style={{ fontSize: '24px', padding: '10px 0' }}>
              Personal Information
            </div>
            <div style={{ fontSize: '16px', lineHeight: '1.5' }}>
              <div>
                Complainant Full Name:{'  '}
                {formData.fullName}
              </div>
              <div>
                Nationality:{'  '}
                {formData.nationality &&
                  enums.nationalityEnums.find(
                    (a) => a.key === formData.nationality
                  ).value[lang === 'en-US' ? 'en' : 'ar']}
              </div>
              <div>
                Source:{'  '}
                {formData.source === 'OTHER'
                  ? formData.sourceOther
                  : formData.source &&
                    enums.sourceEnums.find((a) => a.key === formData.source)
                      .value[lang === 'en-US' ? 'en' : 'ar']}
              </div>

              <div>
                Mobile:{'  '}
                {formData.mobile}{' '}
              </div>
              <div>
                Complainant&apos;s Role:{'  '}
                {formData.complainantRole &&
                  enums.complainantEnums.find(
                    (a) => a.key === formData.complainantRole
                  ).value[lang === 'en-US' ? 'en' : 'ar']}
              </div>
              <div>
                Email:{'  '}
                {formData.email}{' '}
              </div>
              <div>
                Emirates ID:{'  '}
                {formData.eid}{' '}
              </div>
              <div>
                Unified Number:{'  '}
                {formData.unifiedNumber}{' '}
              </div>
            </div>
            <div style={{ fontSize: '24px', padding: '10px 0' }}>
              Violation Details
            </div>
            <div
              style={{
                fontSize: '16px',
                lineHeight: '1.5',
                wordBreak: 'break-all',
                whiteSpace: 'pre-wrap',
              }}
            >
              <div>
                Emirate:{'  '}
                {formData.emirate &&
                  enums.emirateEnums.find((a) => a.key === formData.emirate)
                    .value[lang === 'en-US' ? 'en' : 'ar']}
              </div>
              <div>
                Violation Type:{'  '}
                {formData.violationType &&
                  enums.violationTypeEnums.find(
                    (a) => a.key === formData.violationType
                  ).value[lang === 'en-US' ? 'en' : 'ar']}
              </div>
              <div>
                Date of Violation:{'  '}
                {formData.violationDate}
              </div>
              <div>
                Entity Name:{'  '}
                {formData.emirateEntity === -1
                  ? formData.emirateEntityOther
                  : formData.emirateEntity &&
                    entitys.find((a) => a.id === formData.emirateEntity)[
                      lang === 'en-US' ? 'name' : 'nameAr'
                    ]}
              </div>
              <div>
                Violation Description:{'  '}
                {formData.violationDesc}
              </div>
              <div>
                Additional Details:{'  '}
                {formData.violationAdditionalDetails}
              </div>

              <div>
                Has this violation been reported to any other Entity in the
                past:
                {formData.hasReported ? 'YES' : 'NO'}
              </div>
              {formData.hasReported ? (
                <>
                  <div>
                    Entity Name:{'  '}
                    {formData.refEntity}
                  </div>
                  <div>
                    Reference Number:{'  '}
                    {formData.refRefNumber}
                  </div>
                  <div>
                    Date of Complaint:{'  '}
                    {formData.refYear}
                  </div>
                </>
              ) : (
                ''
              )}
            </div>

            {formData.violators.length > 0 ? (
              <>
                <div
                  style={{
                    fontSize: '24px',
                    padding: '10px 0',
                    wordWrap: 'break-word',
                  }}
                >
                  Who are the violators and/or witnesses
                </div>
                {formData.violators.map((a) => (
                  <div
                    key={a.key}
                    style={{
                      fontSize: '16px',
                      lineHeight: '1.5',
                      wordBreak: 'break-all',
                      whiteSpace: 'pre-wrap',
                    }}
                  >
                    Role:{' '}
                    {
                      enums.violatorOrWitnessEnums.find((b) => b.key === a.role)
                        .value[lang === 'en-US' ? 'en' : 'ar']
                    }
                    {',  '}
                    Nationality:{' '}
                    {
                      enums.nationalityEnums.find(
                        (b) => b.key === a.nationality
                      ).value[lang === 'en-US' ? 'en' : 'ar']
                    }
                    {',  '}
                    concerned Parties: {a.concernedParties}
                  </div>
                ))}
              </>
            ) : (
              ''
            )}

            {formData.supportEntities.length > 0 ? (
              <>
                <div style={{ fontSize: '24px', padding: '10px 0' }}>
                  Supporting Documents
                </div>
                {formData.supportEntities.map((a) => (
                  <div
                    key={a.key}
                    style={{ fontSize: '16px', lineHeight: '1.5' }}
                  >
                    {a.href}
                  </div>
                ))}
              </>
            ) : (
              ''
            )}

            {formData.signedDocHref.length > 0 ? (
              <>
                <div style={{ fontSize: '24px', padding: '10px 0' }}>
                  Signed Documents:
                </div>
                {formData.signedDocHref.map((a) => (
                  <div
                    key={a.key}
                    style={{ fontSize: '16px', lineHeight: '1.5' }}
                  >
                    {a.href}
                  </div>
                ))}
              </>
            ) : (
              ''
            )}
          </div>
          <div className={styles['preview-buttons']}></div>
        </div>
      </Modal>
    </>
  );
}
export default Preview;
